/**
 * Created by GUO on 2017/5/20.
 * @flow
 */

import React from 'react';
import {
    Text,
    StyleSheet,
    PixelRatio,
    TouchableOpacity,
    Image,
} from 'react-native';

export default class RssItem extends React.PureComponent{

    props: {
        data: Object,
    }

    render(){

        let {name,image,cnt} = this.props.data;

        return (
            <TouchableOpacity activeOpacity={0.5} style = {styles.item}>
                <Image
                    source = {{uri:image}}
                    style = {styles.itemImage}/>
                <Text style={styles.itemName}>{name}</Text>
                <Text style={styles.flag}>{cnt}</Text>
            </TouchableOpacity>
        );
    }
}

export const ITEM_HEIGHT = 48;
const styles = StyleSheet.create({
    item:{
        height:ITEM_HEIGHT,
        backgroundColor:'white',
        flexDirection: 'row',
        justifyContent:'flex-start',
        alignItems:'center',
        paddingHorizontal:10,
        borderBottomWidth: 1/PixelRatio.get(),
        borderColor:'#eaeaea'
    },
    itemImage:{
        width:32,
        height:32,
        borderRadius:16,
    },
    itemName:{
        fontSize:16,
        color:'black',
        flex:1,
        marginLeft:16,
    },
    flag:{
        fontSize:12,
        backgroundColor:'rgba(0,0,0,0.54)',
        color: 'white',
        fontWeight: 'bold',
        borderRadius:9,
        width:18,
        height:18,
        textAlign:'center',
    }
});